<template>
  <el-main>
    <el-form
      :model="information"
      label-width="80px"
      style="margin-top:30px;width: 500px"
      :rules="rules"
      ref="information"
      v-loading="loading"
    >
      <el-form-item label="工号" prop="number">
        <el-input v-model="information.number"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="information.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="information.sex" placeholder="请选择" style="margin-right:260px">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="information.age"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="yearIn">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="information.yearIn"
            style="width: 100%;"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button type="primary" @click="submitForm('information')">添加</el-button>
        <el-button @click="resetForm('information')" style="margin-left:50px">重置</el-button>
      </el-form-item>
    </el-form>
  </el-main>
</template>

<script>
import { postRequestByParams } from "../utils/api";

export default {
  data() {
    return {
      information: {
        number: "",
        name: "",
        sex: "",
        age: "",
        yearIn: ""
      },
      input_number: "",
      old: "",
      loading: false,
      rules: {
        number: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 12, max: 12, message: "长度为12个字符", trigger: "blur" }
        ],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度为2-4个字符", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        age: [
          { required: true, message: "年龄不能为空" },
          { type: "number", message: "年龄必须为数字值" }
        ],
        yearIn: [{ required: true, message: "不能为空" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;

          var _this = this;
          postRequestByParams("/employee/add-employee", {
            number: _this.information.number,
            name: _this.information.name,
            sex: _this.information.sex,
            age: _this.information.age,
            yearIn: _this.information.yearIn
          }).then(resp => {
            _this.loading = false;
            if (resp.status == 200) {
              var json = resp.data;
              this.$alert(json.data);
            } else {
              this.$alert("未知错误！");
            }
            _this.resetForm("information");
          });
        } else {
          this.$alert("输入错误！");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style>
</style>